<template>
    <div class="found-box">
        <van-row class="editor-box-tit background-fff">
            <van-col span="8">
                <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
            </van-col>
            <van-col span="8" class="text-align-c color-3 font-4">
                TOP排行榜
            </van-col>
            <van-col span="8" class="text-align-r">
                <img  @click="shareBox()" class="center-jt" src="../../assets/image/index/icon_share.png" alt="" srcset="">
            </van-col>
        </van-row>
        <div class="found-list-box clearfix">
            <div class="found-list-tab clearfix">
                <span class="font-3 font-bold fl" v-for="(item,index) in listType" :key="index" :class="activeIndex == index ? 'active' : ''" @click="clickList(index)">{{item}}</span>
                <em class="font-24 font-bold fr" @click="czxy = !czxy">榜单规则</em>
            </div>
            <div class="first-three" v-if="activeIndex == 0">
                <div class="clearfix first-box fl">
                    <div class="first-two position-r" @click="centerLink(rqList[1].userId)">
                        <img class="first-two-tx border-radius-50" style="height: 3.4rem; width: 3.4rem;" :src="$imgPath(rqList[1] ? rqList[1].headImg : '')" alt="">
                        <span class="first-two-box"></span>
                        <img class="mc" src="../../assets/image/index/img_second.png" alt="">
                        <img class="wgTwo" src="../../assets/image/index/wgTwo.png" alt="">
                        <!-- <span class="dengji">LV{{rqList[1] ? rqList[1].level : ''}}</span> -->
                    </div>
                    <div class="name-sex font-2">{{rqList[1] ? rqList[1].nickName : ''}}
                        <img v-if="rqList[1] ? rqList[1].sex == 2 : ''" class="" src="../../assets/image/index/img_female.png" alt="">
                        <img v-else-if="rqList[1] ? rqList[1].sex == 1 : ''" class="" src="../../assets/image/index/img_male.png" alt="">
                    </div>
                    <div class="zhi text-align-c font-2">人气值</div>
                    <div class="zhi text-align-c font-3">{{rqList[1] ? rqList[1].popularity : ''}}</div>
                </div>
                <div class="clearfix first-box fl first-one">
                    <div class="first-two position-r" style="margin-top:0;" @click="centerLink(rqList[0].userId)">
                        <img class="first-two-tx one-tx border-radius-50" style="height: 3.8rem; width: 3.8rem;" :src="$imgPath(rqList[0] ? rqList[0].headImg : '')" alt="">
                        <span class="first-two-box tx1"></span>
                        <img class="mc" src="../../assets/image/index/img_first.png" alt="">
                        <img class="wgTwo" src="../../assets/image/index/wgOne.png" alt="">
                        <!-- <span class="dengji">LV{{rqList[0] ? rqList[0].level : ''}}</span> -->
                    </div>
                    <div class="name-sex font-2">{{rqList[0] ? rqList[0].nickName : ''}}
                        <img v-if="rqList[0] ? rqList[0].sex == 2 : ''" class="" src="../../assets/image/index/img_female.png" alt="">
                        <img v-else-if="rqList[0] ? rqList[0].sex == 1 : ''" class="" src="../../assets/image/index/img_male.png" alt="">
                    </div>
                    <div class="zhi text-align-c font-2">人气值</div>
                    <div class="zhi text-align-c font-3">{{rqList[0] ? rqList[0].popularity : ''}}</div>
                </div>
                <div class="clearfix first-box fl">
                    <div class="first-two position-r" @click="centerLink(rqList[2].userId)">
                        <img class="first-two-tx third-tx border-radius-50" style="height: 3.1rem; width: 3.1rem;" :src="$imgPath(rqList[2] ? rqList[2].headImg : '')" alt="">
                        <span class="first-two-box tx3"></span>
                        <img class="mc" src="../../assets/image/index/img_third.png" alt="">
                        <img class="wgTwo" src="../../assets/image/index/wgThree.png" alt="">
                        <!-- <span class="dengji">LV{{rqList[2] ? rqList[2].level : ''}}</span> -->
                    </div>
                    <div class="name-sex font-2">{{rqList[2] ? rqList[2].nickName : ''}}
                        <img v-if="rqList[2] ? rqList[2].sex == 2 : ''" class="" src="../../assets/image/index/img_female.png" alt="">
                        <img v-else-if="rqList[2] ? rqList[2].sex == 1 : ''" class="" src="../../assets/image/index/img_male.png" alt="">
                    </div>
                    <div class="zhi text-align-c font-2">人气值</div>
                    <div class="zhi text-align-c font-3">{{rqList[2] ? rqList[2].popularity :''}}</div>
                </div>
            </div>
            <div class="first-three" v-else>
                <div class="clearfix first-box fl">
                    <div class="first-two position-r clearfix" ><!--@click="centerLink(rqList[1].userId)"-->
                        <img class="border-radius-50 list-tx fl aboutPicHW38 aboutPic38" v-if="rqList[1].fortunelisteStatus == 1" src="../../assets/image/index/img_mystery users@3x.png" alt="">
                        <img class="first-two-tx border-radius-50 aboutPicHW34" v-else :src="$imgPath(rqList[1] ? rqList[1].headImg : '')" alt="">      
                        <span class="first-two-box"></span>
                        <img class="mc" src="../../assets/image/index/img_second.png" alt="">
                        <img class="wgTwo" src="../../assets/image/index/wgTwo.png" alt="">
                        <!-- <span class="dengji">LV0</span> -->
                    </div>
                    <div class="name-sex font-2">{{rqList[1].fortunelisteStatus == 1 ? '隐私保护' : (rqList[1].nickName ? rqList[1].nickName : '')}}</div>
                    <div class="zhi text-align-c font-2">贡献值</div>
                    <div class="zhi text-align-c font-3">{{rqList[1] ? rqList[1].wealth : ''}}</div>
                </div>
                <div class="clearfix first-box fl first-one">
                    <div class="first-two position-r clearfix" style="margin-top:0;"><!--@click="centerLink(rqList[0].userId)"-->
                        <img class="border-radius-50 list-tx fl aboutPicHW38 aboutPic38 one-tx" v-if="rqList[0].fortunelisteStatus == 1" src="../../assets/image/index/img_mystery users@3x.png" alt="">
                        <img class="first-two-tx one-tx border-radius-50 aboutPicHW38" v-else :src="$imgPath(rqList[0] ? rqList[0].headImg : '')" alt="">
                        <span class="first-two-box tx1"></span>
                        <img class="mc" src="../../assets/image/index/img_first.png" alt="">
                        <img class="wgTwo" src="../../assets/image/index/wgOne.png" alt="">
                        <!-- <span class="dengji">LV0</span> -->
                    </div>
                    <div class="name-sex font-2">{{rqList[0].fortunelisteStatus == 1 ? '隐私保护' : (rqList[0].nickName ? rqList[0].nickName : '')}}</div>
                    <div class="zhi text-align-c font-2">贡献值</div>
                    <div class="zhi text-align-c font-3">{{rqList[0] ? rqList[0].wealth : ''}}</div>
                </div>
                <div class="clearfix first-box fl">
                    <div class="first-two position-r clearfix"><!--@click="centerLink(rqList[2].userId)"-->
                        <img class="border-radius-50 list-tx fl aboutPicHW31 aboutPic31" v-if="rqList[2].fortunelisteStatus == 1" src="../../assets/image/index/img_mystery users@3x.png" alt="">
                        <img class="first-two-tx third-tx border-radius-50 aboutPicHW31" v-else :src="$imgPath(rqList[2] ? rqList[2].headImg :'')" alt="">
                        <span class="first-two-box tx3"></span>
                        <img class="mc" src="../../assets/image/index/img_third.png" alt="">
                        <img class="wgTwo" src="../../assets/image/index/wgThree.png" alt="">
                        <!-- <span class="dengji">LV0</span> -->
                    </div>
                    <div class="name-sex font-2">{{rqList[2].fortunelisteStatus == 1 ? '隐私保护' : (rqList[2].nickName ? rqList[2].nickName : '')}}</div>
                    <div class="zhi text-align-c font-2">贡献值</div>
                    <div class="zhi text-align-c font-3">{{rqList[2] ? rqList[2].wealth : ''}}</div>
                </div>
            </div>
            <ul class="clearfix list-ul" >
                <li class="clearfix list-li" v-for="(item,index) in rqList" :key="index" v-if="index>2">
                    <em class="bianhao font-4 fl">{{index + 1}}</em>
                    <div class="list-conent fl"><!--@click="centerLink(item.userId)"-->
                        <img class="border-radius-50 list-tx fl" v-if="activeIndex == 0" :src="$imgPath(rqList ? item.headImg : '')" alt="">
                        <img class="border-radius-50 list-tx fl" v-else-if="item.fortunelisteStatus == 1" src="../../assets/image/index/img_mystery users@3x.png" alt="">
                        <img class="border-radius-50 list-tx fl" v-else :src="$imgPath(item.headImg)" alt="">
                        <div class="list-right-box fl">
                            <div class="right-box-s">
                                <span class="fl color-3 font-3">{{activeIndex == 0 ? item.nickName : (item.fortunelisteStatus == 1 ? "神秘人" : item.nickName)}}</span>
                                <span class="fr color-6 font-2">{{activeIndex == 0 ? '人气值' : '贡献值'}}</span>
                            </div>
                            <div class="right-box-x">
                                <img class="fl sex-type" v-if="activeIndex == 0 && item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                <img class="fl sex-type" v-if="activeIndex == 0 && item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                <span v-if="item.fortunelisteStatus != 1">
                                    <img class="fl sex-type" v-if="activeIndex == 1 && item.sex == 2" src="../../assets/image/index/img_female.png" alt="">
                                    <img class="fl sex-type" v-if="activeIndex == 1 && item.sex == 1" src="../../assets/image/index/img_male.png" alt="">
                                </span>
                                <span class="fl age color-9 font-2">{{item.fortunelisteStatus == 1 ? '该用户已开启隐私保护' : (item.age ? item.age : '')}}</span>
                                <span class="fl list-dengji" v-if="activeIndex == 0">LV{{item.level}}</span>
                                <span class="fr color-3 font-3 shuzi">{{activeIndex == 0 ? item.popularity : item.wealth}}</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="my-list-box" v-if="myList != null">
            <div class="my-list-box1 position-r" @click="centerLink(myList.userId)">
                <img class="border-radius-50 my-tx fl" style="height: 3.1rem; width: 3.1rem;" :src="$imgPath(myList.user ? myList.user.headImg : '')" alt="">
                <span class="font-3 my-paiming">我的排名</span>
                <span class="font-3 fr color-default paiming" v-if="myList.popularityRanking<10 && activeIndex == 0">{{myList.popularityRanking}}</span>
                <span class="font-3 fr color-default paiming" v-else-if="myList.wealthRanking<10 && activeIndex == 1">{{myList.wealthRanking}}</span>
                <span class="font-3 fr color-default paiming" v-else>暂未上榜</span>
            </div>
        </div>
        <!-- 榜单规则弹框 -->
        <van-popup v-model="czxy" position="right" :overlay="false">
            <div class="czxy-style" @click="czxy = !czxy">
                <h2>榜单规则说明</h2>
                <h3>1.什么是人气榜？</h3>
                <span>每次完成订单、收到打赏、被浏览关注后，你将获得对应的人气指数。我们会对个人人气指数进行统计和排名，所累积的人气指数越高，排名则越高。</span>          
                <h3>2.什么是财富榜？</h3>               
                <span>每次下单、打赏礼物后，你将积累对应的贡献指数。我们会对个人贡献指数进行统计和排名。所累积的贡献指数越高，排名则越高。</span>            
                <h3>3.人气榜和财富榜的更新周期</h3>
                <span>我们将7*24小时实时统计个人的人气指数和贡献指数，每10分钟自动刷新一次榜单。</span>                           
            </div>
        </van-popup>
        <van-popup v-model="share" position="bottom" class="yw-popup-share">
            <share></share>
        </van-popup>
    </div>
</template>
<script>
import { Toast } from 'vant'
import share from '@/components/common/share'
    import apiHttp from '../../api/index'
    export default {
        data() {
            return {
                czxy:false,
                page: 0,
                size: 10,
                rqList:[],
                myList:{},
                activeIndex:this.$route.query.index ? this.$route.query.index : 0,
                listType:['人气榜','财富榜'],
                index:this.$route.params.index,
                share:false,
                locationHref:window.location.href,
               /* data: {
                    "page": null,
                    "pageVo": {
                        "content": [{
                            "level": "0",
                            "popularity": "39",
                            "wealth": null,
                            "nickName": "223andy46",
                            "wealthRanking": null,
                            "userId": "ecf68446-40a2-4c9d-a813-34b75ffae95b",
                            "sex": "1",
                            "headImg": "/user/head/354183531740400_美女10.jpg",
                            "age": "10",
                            "popularityRanking": "1",
                            "fortunelisteStatus": "1"
                        }, {
                            "level": "0",
                            "popularity": "19",
                            "wealth": null,
                            "nickName": "曹林",
                            "wealthRanking": null,
                            "userId": "fb7eee4e-9365-4057-ba51-635570f772fe",
                            "sex": "1",
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epF5JZlh5cT1NKC3z1wibrz4Wd9mwiaF15X8K5Dgn4eZuibAoRNLcKrBkENGUHqC589tchp4FSULDJFA/132",
                            "age": null,
                            "popularityRanking": "2",
                            "fortunelisteStatus": "1"
                        }, {
                            "level": "0",
                            "popularity": "1",
                            "wealth": null,
                            "nickName": "^_^ 笑^_^",
                            "wealthRanking": null,
                            "userId": "19dc1b63-39b9-40c7-bd2c-e132a3436fdc",
                            "sex": "2",
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/862Ts7CEVlKQibDpj16oFCfmN17mAMJT6gI1BP4vlaiadfAuxX6XXaibYBMHI94DHe8beKKJwhr5UQEkVoP7kF5TVJe2laImPsg/132",
                            "age": null,
                            "popularityRanking": "3",
                            "fortunelisteStatus": "0"
                        }, {
                            "level": "0",
                            "popularity": "1",
                            "wealth": null,
                            "nickName": "游客78250164",
                            "wealthRanking": null,
                            "userId": "a433bedb-bece-439b-a373-4b6b44a8c387",
                            "sex": "0",
                            "headImg": "/user/head/512805703005100_美女1.jpg",
                            "age": "2",
                            "popularityRanking": "4",
                            "fortunelisteStatus": "0"
                        }, {
                            "level": "0",
                            "popularity": "1",
                            "wealth": null,
                            "nickName": "方二华",
                            "wealthRanking": null,
                            "userId": "870a689f-4d95-4164-bfd0-1d0d28cf9065",
                            "sex": "2",
                            "headImg": "/user/head/7581575721106700_timg.jpeg",
                            "age": null,
                            "popularityRanking": "5",
                            "fortunelisteStatus": "1"
                        }, {
                            "level": "0",
                            "popularity": "1",
                            "wealth": null,
                            "nickName": "Sarah-测试",
                            "wealthRanking": null,
                            "userId": "2ad80e1e-d692-49d4-8222-9fc2028dd7c6",
                            "sex": "2",
                            "headImg": "/user/head/7326131757278000_icons1.png.jpg",
                            "age": "0",
                            "popularityRanking": "6",
                            "fortunelisteStatus": "0"
                        }, {
                            "level": "0",
                            "popularity": "1",
                            "wealth": null,
                            "nickName": "95327",
                            "wealthRanking": null,
                            "userId": "09c8ea37-ec29-4b38-86aa-779715499215",
                            "sex": "3",
                            "headImg": "/user/head/1576885996312700_QQ图片20181023173853.png",
                            "age": "31",
                            "popularityRanking": "7",
                            "fortunelisteStatus": "0"
                        }],
                        "pageable": {
                            "sort": {
                                "sorted": true,
                                "unsorted": false
                            },
                            "offset": 0,
                            "pageNumber": 0,
                            "pageSize": 10,
                            "unpaged": false,
                            "paged": true
                        },
                        "totalElements": 7,
                        "totalPages": 1,
                        "last": true,
                        "number": 0,
                        "size": 10,
                        "sort": {
                            "sorted": true,
                            "unsorted": false
                        },
                        "first": true,
                        "numberOfElements": 7
                    },
                    "userCredit": {
                        "id": "c1381719-43e6-4964-919b-6fbdcc69a8c8",
                        "createTime": 1540451733000,
                        "user": {
                            "id": "ecf68446-40a2-4c9d-a813-34b75ffae95b",
                            "createTime": 1536291007000,
                            "code": "75423002",
                            "nickname": "223andy46",
                            "sex": 1,
                            "headImg": "/user/head/354183531740400_美女10.jpg",
                            "country": "中国",
                            "province": "陕西",
                            "city": "西安",
                            "signature": "我加班我骄傲",
                            "age": 10,
                            "type": 0,
                            "status": 0,
                            "name": null,
                            "birthday": "2008-10-12",
                            "zodiacSigns": "白羊座",
                            "hobby": "时尚,桌游,电影",
                            "timeLimit": null,
                            "credit": null,
                            "level": "0",
                            "phone": "18792939231",
                            "email": "vsks@qq.com",
                            "qq": "435564803",
                            "onlineStatus": 1,
                            "min": null,
                            "unit": null,
                            "onlineTime": 1540385664000,
                            "myCollect": null,
                            "followNum": null,
                            "fansNum": null,
                            "seller": false,
                            "bindWx": false
                        },
                        "popularity": 39,
                        "wealth": 478,
                        "popularityRanking": 1,
                        "wealthRanking": 1
                    },
                    "popularityRanking": null,
                    "wealthRanking": null,
                    "popularity": null,
                    "wealth": null,
                    "fortunelisteStatus": null,
                    "headImg": null,
                    "userId": null
                },
                data1: {
                    "page": null,
                    "pageVo": {
                        "content": [{
                            "nickName": "冬天",
                            "wealthRanking": "1",
                            "wealth": "256",
                            "userId": "1545645620-e929-476c-869c-c9154561",
                            "age": null,
                            "headImg": "/user/head/defaultHeadImage.png",
                            "sex": "1",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "春天",
                            "wealthRanking": "2",
                            "wealth": "145",
                            "userId": "68b27520-e929-476c-869c-c15122212",
                            "age": null,
                            "headImg": "/user/head/defaultHeadImage.png",
                            "sex": "1",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "A菩提树",
                            "wealthRanking": "3",
                            "wealth": "123",
                            "userId": "793fea9a-8b04-43b2-8675-e72cb86099af",
                            "age": null,
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/GJDFU1JQ2w1aQLKfgvG0YnPpjibfNo25UBwDQCoUmfZrBaq7QboC2eE5EJSrxoibto3Huom0Qzho3l6JGWJ6CCHAI6GdjjfFhU/132",
                            "sex": "1",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "浮萍",
                            "wealthRanking": "4",
                            "wealth": "110",
                            "userId": "c0f2b456-a182-4b89-af83-5585d103a090",
                            "age": null,
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKB6mM53n4Kgh6jVibXmLTicbUDXWkqCxG8MyuRGvBqb03ulU3gFdaGsmkMicDibliczQdl9FjNr9tpd1w/132",
                            "sex": "2",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "浮萍",
                            "wealthRanking": "5",
                            "wealth": "102",
                            "userId": "49985688-eb83-47cc-ba4f-faa4f20fc8fd",
                            "age": null,
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/nL2hia6O3yW8Vxib0AVJhYVfDlfbjGmRribM7yKNvxjTe20libmfTNEXticbkRvYtI1xthZmw2lLCkTTpOticU71bsgicpX9nH8r238/132",
                            "sex": "2",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "A鑿╂彁鏍�",
                            "wealthRanking": "6",
                            "wealth": "89",
                            "userId": "f042bfaa-9cdf-414c-b111-3c8ad98497e8",
                            "age": null,
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/vi_32/HwQ59xxM6gqIxoNCdXzezHqVxnlPJqqztia1l0FBzy8O7CR37QwatH8eqv1xpvrZFk4gV4PgOoAZVjGQFj46jBA/132",
                            "sex": "1",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "95327",
                            "wealthRanking": "7",
                            "wealth": "78",
                            "userId": "09c8ea37-ec29-4b38-86aa-779715499215",
                            "age": "31",
                            "headImg": "/user/head/1576885996312700_QQ图片20181023173853.png",
                            "sex": "3",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "差不多先生",
                            "wealthRanking": "8",
                            "wealth": "56",
                            "userId": "f281d9f1-9f3e-4230-810c-76e305e5a553",
                            "age": null,
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/PiajxSqBRaEIZTb5OG10ZvyHcBaq8y8Zmt78wANywrS02fll3UhicibCWF9swOtvHgtzIBZOicQDbIiaDWV8PVic3zBA/132",
                            "sex": "1",
                            "fortunelisteStatus": "1"
                        }, {
                            "nickName": "差不多先生",
                            "wealthRanking": "9",
                            "wealth": "45",
                            "userId": "e2ad4de2-98c7-42c1-819d-ed6e9a6b1596",
                            "age": "32",
                            "headImg": "/user/head/366891563378400_IMG_20181006_224305.jpg",
                            "sex": "1",
                            "fortunelisteStatus": "0"
                        }, {
                            "nickName": "你若安好便是晴天",
                            "wealthRanking": "10",
                            "wealth": "32",
                            "userId": "997d6044-9532-49ac-8c9c-7aabf8dbb185",
                            "age": null,
                            "headImg": "http://thirdwx.qlogo.cn/mmopen/vi_32/ibhVO2AupnqpsymnR48VEbsVlftWoLrPcok6IYTwiaJpvqSVgc65PHzPlCXBUibPQJP3199f7XDk1kLquXPKLsnWw/132",
                            "sex": "2",
                            "fortunelisteStatus": "0"
                        }],
                        "pageable": {
                            "sort": {
                                "unsorted": false,
                                "sorted": true
                            },
                            "offset": 0,
                            "pageSize": 10,
                            "pageNumber": 0,
                            "paged": true,
                            "unpaged": false
                        },
                        "totalElements": 43,
                        "totalPages": 5,
                        "last": false,
                        "number": 0,
                        "size": 10,
                        "sort": {
                            "unsorted": false,
                            "sorted": true
                        },
                        "numberOfElements": 10,
                        "first": true
                    },
                    "userCredit": {
                        "id": "44c3b6e8-8869-457c-bce7-20fcdfc89b20",
                        "createTime": 1540384593000,
                        "user": {
                            "id": "a433bedb-bece-439b-a373-4b6b44a8c387",
                            "createTime": 1539049893000,
                            "code": "78250164",
                            "nickname": "游客78250164",
                            "sex": 2,
                            "headImg": "/user/head/512805703005100_美女1.jpg",
                            "country": null,
                            "province": null,
                            "city": null,
                            "signature": "猜猜我是谁谁谁是谁誓师大会都好好的虎岛和夫好喝的虎岛和夫好的互粉互粉互粉互粉互粉合伙人",
                            "age": 2,
                            "type": 0,
                            "status": 0,
                            "name": null,
                            "birthday": "2016-10-15",
                            "zodiacSigns": "白羊座",
                            "hobby": "旅游,时尚,狼人杀",
                            "timeLimit": null,
                            "credit": null,
                            "level": "0",
                            "phone": "18392079892",
                            "email": null,
                            "qq": "565456",
                            "onlineStatus": 1,
                            "min": null,
                            "unit": null,
                            "onlineTime": 1540367850000,
                            "myCollect": null,
                            "followNum": null,
                            "fansNum": null,
                            "bindWx": false,
                            "seller": false
                        },
                        "popularity": 0,
                        "wealth": 0,
                        "popularityRanking": 0,
                        "wealthRanking": 0
                    },
                    "popularityRanking": null,
                    "wealthRanking": null,
                    "popularity": null,
                    "wealth": null,
                    "fortunelisteStatus": null,
                    "headImg": null,
                    "userId": null
                }*/
            }
        },
        components:{
            share
        },
        //页面加载
        mounted(){         
            if(this.activeIndex == 0||this.index==0){
                this.getUserCreditPopularityRanking()
            }else{
                this.getUserCreditWealthRanking()
            } 
        },
        methods: {
            // 分享
            shareBox(){
                if(this.$store.state.iosTrue == true){
                    let st = `${this.locationHref}|排行榜|''`
                    window.webkit.messageHandlers.wxShare.postMessage(st)
                }else{
                    this.share = !this.share
                }
            },
            clickList(index){
                this.activeIndex = index
                if(index == 0){
                    this.getUserCreditPopularityRanking()
                }else{
                    this.getUserCreditWealthRanking()
                }
            },
            //人气榜单查询
            getUserCreditPopularityRanking(){
                let that = this;
                let params = {
                    page:that.page,
                    size:that.size
                }
                apiHttp.apiFoundList.getUserCreditPopularityRanking(params,resp=>{
                    console.log("人气榜查询：");
                    console.log(resp.data);
                    if(resp.code==200&&resp.data!=null&&resp.data!=undefined){
                       that.rqList=[]
                        if(resp.data.pageVo.content.length>0){//真实数据
                            for(var i=0;i<resp.data.pageVo.content.length;i++){
                                if(resp.data.pageVo.content[i].headImg==null || resp.data.pageVo.content[i].headImg==''){
                                    resp.data.pageVo.content[i].headImg = '/user/head/defaultHeadImage.png' 
                                }                               
                            }
                            if(resp.userCredit!=null&&(resp.data.userCredit.user.headImg==null || resp.data.userCredit.user.headImg=='')){
                                resp.data.userCredit.user.headImg = '/user/head/defaultHeadImage.png' 
                            }                        
                            that.rqList = resp.data.pageVo.content;
                           
                            for (var i=0;i<that.rqList.length;i++){
                              if(i<3){
                                if (that.rqList[i].nickName.length > 8) {
                                    that.rqList[i].nickName =  that.rqList[i].nickName.slice(0,5) + '...'
                                }
                              }
                            }
                        }else{//假数据
                           /*  that.rqList=this.data.pageVo.content;
                            for (var i=0;i<that.rqList.length;i++){
                                if(i<3){
                                    if (that.rqList[i].nickName.length > 8) {
                                        that.rqList[i].nickName =  that.rqList[i].nickName.slice(0,5) + '...'
                                    }
                                }
                            } */
                        }
                       
                        that.myList = resp.data.userCredit
                    }else {
                       // Toast(resp.message)
                    }
                })
            },
           //财富榜查询
            getUserCreditWealthRanking(){
                let that = this;
                let url='?page='+that.page+'&size='+that.size+'';
                apiHttp.apiFoundList.getUserCreditWealthRanking(url,'',resp=>{                  
                    if(resp.code==200&&resp.data!=null&&resp.data!=undefined){
                        that.rqList=[]
                        if(resp.data.pageVo.content.length>0){//真实数据
                            for(var i=0;i<resp.data.pageVo.content.length;i++){
                                if(resp.data.pageVo.content[i].headImg==null || resp.data.pageVo.content[i].headImg==''){
                                    resp.data.pageVo.content[i].headImg = '/user/head/defaultHeadImage.png' 
                                }                               
                            }
                            if(resp.userCredit!=null&&(resp.data.userCredit.user.headImg==null || resp.data.userCredit.user.headImg=='')){
                               resp.data.userCredit.user.headImg = '/user/head/defaultHeadImage.png' 
                            }
                            that.rqList = resp.data.pageVo.content
                            for (var i=0;i<that.rqList.length;i++)
                            {
                                if(i<=3){
                                    if (that.rqList[i].nickName.length > 8) {
                                        that.rqList[i].nickName =  that.rqList[i].nickName.slice(0,5) + '...'
                                    }
                                }

                            }
                        }else {//假数据
                            /* that.rqList=this.data1.pageVo.content;
                            for (var i=0;i<that.rqList.length;i++)
                            {
                                if(i<=3){
                                    if (that.rqList[i].nickName.length > 8) {
                                        that.rqList[i].nickName =  that.rqList[i].nickName.slice(0,5) + '...'
                                    }
                                }

                            } */
                        }
                        that.myList = resp.data.userCredit;
                    }else {
                       // Toast(resp.message)
                    }
                })
            },
            centerLink(userId){
                this.$router.push({
                    name:'center',
                    query:{
                        userId:userId
                    }
                })
            }            
        }
    }
</script>
<style scoped>
.found-list-box{
    background-image: url(http://132.232.13.213/gaochen/bg_1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
}
.found-list-tab{
    padding: .6rem;
    color: #fff;
}
.found-list-tab span{
    margin-left: 1.2rem;
    padding-bottom: .2rem;
    display: inline-block;
    border-bottom:solid .08rem transparent;
}
.found-list-tab .active{
    border-bottom:solid .08rem #fff;
}
.found-list-tab em{
    padding-top: .2rem;
}
.first-three{
    min-height: 8rem;
    padding: .2rem 1rem;
}
.first-two{
    width: 100%;
    margin-top: 1rem;
}
.first-two-tx{
    margin-top: .5rem;
    width: 80%;
    margin-left: .41rem;
    border:.2rem #ddddde solid;
    overflow: hidden;
    /* border-radius: 50%;
    border-image: -webkit-linear-gradient(#F6F6F6,#A1A1A1) 30 30;
    border-image: -moz-linear-gradient(#F6F6F6,#A1A1A1) 30 30;
    border-image: linear-gradient(#F6F6F6,#A1A1A1) 30 30; */
}

.one-tx{
    border:.2rem #ffee2e solid;
    margin-left: .29rem;
    width: 90%;
    margin-top: .6rem;
}
.third-tx{
    border: .2rem #fc9580 solid;
    margin-top: .4rem;
    width: 76%;
    margin-left: .5rem;
}
.wgTwo{
    position: absolute;
    right: 0;
    top: 0;
    width: 1rem;
}
.tx1{
    background: url(~@/assets/image/index/img_frame1.png) no-repeat top center;
    min-height: 4.6rem;
}
.tx3{
    background: url(~@/assets/image/index/img_frame3.png) no-repeat top center;
    min-height: 3.8rem;
}
.mc{
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2rem;
    z-index: 100;
}
.first-one{
    margin: 0 5%;
}
.dengji{
    position: absolute;
    bottom: -0.2rem;
    left: calc(50% - 0.8rem);
    background:rgba(253,176,11,1);
    color: #fff;
    border-radius: .4rem;
    z-index: 100;
    width: 1.6rem;
    text-align: center;
    display: inline-block;
}
.name-sex{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    color: #fff;
    text-align: center;
}
.name-sex img{
    width: .6rem;
    margin-top: .1rem;
    position: relative;
    top: 0.08rem;
}
.first-box{
    width: 30%;
}
.zhi{
    color: #fff;
    opacity: .5;
    height: .8rem;
    line-height: .8rem;
}
.list-ul{
    padding: 1rem .6rem 0 .6rem;
    width: calc(100% - 1.2rem);
}
.list-li{
    padding-top: 1rem;
    height: 2.4rem;
    width: 100%;
}
.bianhao{
    color: #CCCCCC;
    line-height: 2.4rem;
    height: 2.4rem;
    width: 1rem;
}
.list-conent{
    width: calc(100% - 1rem);
    height: 2.4rem;
}
.list-tx{
    width: 2.4rem;
    height: 2.4rem;
}
.list-right-box{
    padding-left: 1rem;
    height: 2rem;
    margin-top: .4rem;
    width: calc(100% - 3.4rem);
}
.right-box-s{
    height: 1rem;
}
.right-box-s span{
    display: inline-block;
    line-height: 1rem;
}
.right-box-s span:nth-child(2){
    padding-right: 1rem;
}
.right-box-x{
    height: 1rem;
}
.right-box-x span{
    margin-top: .1rem;
}
.right-box-x img{
    margin-top: .1rem;
}
.sex-type{
    width: .6rem;
}
.age{
    padding: 0.1rem .2rem 0 .2rem;

}
.list-dengji{
    background:rgba(253,176,11,1);
    color: #fff;
    border-radius: .3rem;
    z-index: 100;
    width: 1.6rem;
    text-align: center;
    display: inline-block;
}
.shuzi{
    padding-right: 1.5rem;
}
.my-list-box{
    position: fixed;
    left: .6rem;
    bottom: 2rem;
    width: calc(100% - 1.2rem);
    height: 2.2rem;
    background-color: #fff;
    margin: 0 auto;
    box-shadow: .06rem .06rem .6rem .6rem #f6f6f6;
    border-radius: 2rem;
}
.my-list-box1{
    width: 100%;
    height: 100%;
}
.my-tx{
    width: 3rem;
    border:#fff solid .15rem;
    position: absolute;
    left: 1rem;
    top: -0.5rem;
}
.my-list-box1 span{
    height: 2.2rem;
    line-height: 2.2rem;
}
.paiming{
    padding-right: 1rem;
}
.my-paiming{
    padding-left: 4.8rem;
}
.changshi-img-box{
    border:#000 solid .1rem;
}
.aboutPicHW38{
    height: 3.8rem; 
    width: 3.8rem;
}
.aboutPic38{  
    margin: 0.5rem 0px 0px 0.2rem;
}
.aboutPicHW34{
    height: 3.4rem; 
    width: 3.4rem;
}
.aboutPic34{  
    margin: 0.5rem 0px 0px 0.4rem;
}
.aboutPicHW31{
    height: 3.1rem; 
    width: 3.1rem;
}
.aboutPic31{  
    margin: 0.5rem 0px 0px 0.6rem;
}
/* 协议样式 */
.czxy-style{
    padding: .6rem .6rem 22rem .6rem;
    text-align: center;
}
.czxy-style h2{
    margin-bottom: 0.4rem;
}
.czxy-style h3{
    text-align: left;   
    margin: 0.3rem 0; 
}
.czxy-style span{
    text-align: left;
    display: block;
}
</style>

